<template>
	<ls-page title="所有订单">
		<view class="continar">
			<view class="filter-continar">
				<view class="item-filter" @tap="toggleTypeShow">
					<view class="fil-tit">{{typeText}}</view>
					<image class="fil-icon" src="https://oss.jtmckj.com/h5-uniapp/zttt/home/fil-icon.png" mode="" />
				</view>
				<view class="item-filter" @tap="timeShow = true">
					<view class="fil-tit">{{timeText}}</view>
					<image class="fil-icon" src="https://oss.jtmckj.com/h5-uniapp/zttt/home/fil-icon.png" mode="" />
				</view>
				<view class="item-filter" @tap="xdrShow = true">
					<view class="fil-tit">{{xdrText}}</view>
					<image class="fil-icon" src="https://oss.jtmckj.com/h5-uniapp/zttt/home/fil-icon.png" mode="" />
				</view>
			</view>

			<scroll-view class="main-scroll" @scrolltolower="scrollToLower" scroll-y="true" lower-threshold="200">
				<!-- 商品反佣 -->
				<block v-for="(item, index) in orderList" :key="index">
					<block v-if="item.typeName === '消费返佣'">
						<view class="product-box">
							<view class="tabeleName">桌台：{{item.roomName}}</view>
							<view class="addpesron"> <text style="color: #212121;">下单人：{{item.orderUserName}}</text>
							</view>
							<view class="jzdh">结账单号：<text style="color: #212121;">{{item.payBatchCode}} </text></view>
							<view class="jzprice">结账金额： <text style="color: #FF3333;">{{item.orderAmt}}</text> </view>
							<view class="jy-box">
								<view class="jy-item">
									<view class="price">{{item.orderAmt}} </view>
									<view class="text">计佣金额(元)</view>
								</view>
								<view class="jy-item">
									<view class="price">{{item.shareAmt}} </view>
									<view class="text">实际金额(元)</view>
								</view>
							</view>
							<view class="product-poa">{{item.typeName}}</view>
						</view>
					</block>

					<block v-if="item.typeName === '商品返佣'">
						<view class="xf-box">
							<view class="tabeleName">桌台：{{item.roomName}}</view>
							<view class="jzdh">台单号：<text style="color: #212121;">{{item.consumeCode}} </text></view>
							<view class="jzprice">清台时间： <text style="color: #212121;"
									v-if="item.endTime">{{item.endTime}}</text> </view>
							<view class="pj-continar">
								<image :src="item.attachment" mode="" />
								<view class="flex-rg">
									<view>{{item.goodsName}}</view>
									<view>￥{{item.salePrice}}</view>
								</view>
							</view>
							<view class="jy-box">
								<view class="jy-item">
									<view class="price">{{item.orderQty}}</view>
									<view class="text">购买数量(瓶)</view>
								</view>
								<view class="jy-item">
									<view class="price">{{item.orderAmt}} </view>
									<view class="text">计佣金额(元)</view>
								</view>
								<view class="jy-item">
									<view class="price">{{item.shareAmt}} </view>
									<view class="text">实际金额(元)</view>
								</view>
							</view>
							<view class="product-poa">{{item.typeName}}</view>
						</view>
					</block>
				</block>
			</scroll-view>
		</view>

		<up-picker :show="typeShow" :columns="typeColumns" @confirm="typeConfirm" @cancel='typeShow = false'
			keyName="text" title="所有订单" confirm-color="#ff6a00"></up-picker>
		<!-- <uni-datetime-picker type="month" @confirm="timeConfirm" @cancel="timeCancel" title="时间选择"/> -->
		<up-datetime-picker title="时间选择" :show="timeShow" v-model="selectTime" :closeOnClickOverlay="true"
			@close="timeShow = false" mode="year-month" @cancel="timeShow = false"
			@confirm="timeConfirm"></up-datetime-picker>
		<up-picker :show="xdrShow" :columns="xdrColumns" @confirm="xdrConfirm" @cancel="xdrShow = false" title="下单人" />
	</ls-page>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onUnload, onShow, onHide } from '@dcloudio/uni-app';
	import { HFiveAppObjProcess, HFiveMemberAppObjProcess, GetMinimsgTemplate } from '@/api/public.js'
	import dayjs from 'dayjs'
	import { debounce } from '@/until/tools.js'


	const timeShow = ref(false);
	const typeShow = ref(false);
	const xdrShow = ref(false);
	const timeText = ref(dayjs().startOf('month').format('YYYY年MM月'));
	const typeText = ref('所有订单');
	const xdrText = ref('下单人');
	const typeColumns = ref([
		[
			{ text: '全部', value: '' },
			{ text: '商品分佣', value: '1' },
			{ text: '消费分佣', value: '2' }
		]
	]);
	const xdrColumns = ref([]);
	const postForm = reactive({
		cardNo: uni.getStorageSync('storeCard')?.code, // 假设你从全局获取了这个值
		startTime: dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
		endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
		pageSize: '15',
		pageIndex: '1',
		orderUser: '',
		type: ''
	});
	const hasMore = ref(true);
	const orderList = ref([]);

	// 页面初始化
	const onInit = async () => {
		try {
			// 获取下单人列表
			const res = await HFiveMemberAppObjProcess({
				functionName: 'GetOrderUserList_H5',
				contentData: { cardNo: postForm.cardNo }
			});
			console.log(res);
			res.unshift({ name: '全部', code: '' });
			xdrColumns.value = res.map(item => ({
				text: item.name,
				value: item.code
			}));
			xdrColumns.value = [xdrColumns.value]
			console.log(xdrColumns.value);
		} catch (error) {
			console.error(error);
		}

		// 获取交易记录
		getRecords(true);
	};

	// 获取交易记录
	const getRecords = async (flag) => {
		if (flag) {
			postForm.pageIndex = '1';
			hasMore.value = true;
		}
		try {
			const res = await HFiveMemberAppObjProcess({
				functionName: 'GetComSharingOrder_H5',
				contentData: postForm
			});
			console.log(res);
			res.forEach(item => {
				item.endTime = dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss');
			});
			orderList.value = res;
		} catch (error) {
			console.error(error);
		}
	};

	// 时间选择器确认
	const timeConfirm = (e) => {
		console.log(e);
		timeText.value = dayjs(e.value).format('YYYY年MM月');
		timeShow.value = !timeShow.value;
		const startOfMonth = dayjs(e.value).startOf('month').format('YYYY-MM-DD HH:mm:ss');
		const endOfMonth = dayjs(e.value).endOf('month').format('YYYY-MM-DD HH:mm:ss');
		postForm.startTime = startOfMonth;
		postForm.endTime = endOfMonth;
		getRecords(true);
	};

	// 类型选择器确认
	const typeConfirm = (e) => {
		postForm.type = e.value[0].value;
		getRecords(true);
		typeText.value = e.value[0].text;
		typeShow.value = !typeShow.value;
	};

	// 下单人选择器确认
	const xdrConfirm = (e) => {
		console.log(e.value[0].value);
		postForm.orderUser = e.value[0].value;
		getRecords(true);
		xdrText.value = e.value[0].text;
		xdrShow.value = !xdrShow.value;
	};

	// 触底加载更多
	const scrollToLower = async () => {
		if (!hasMore.value) return;
		postForm.pageIndex++;
		try {
			const res = await HFiveMemberAppObjProcess({
				functionName: 'GetComSharingOrder_H5',
				contentData: postForm
			});
			res.result.forEach(item => {
				item.endTime = dayjs(item.endTime).format('YYYY-MM-DD HH:mm:ss');
			});
			hasMore.value = res.result.length > 0;
			orderList.value.push(...res.result);
		} catch (error) {
			console.error(error);
		}
	};

	const typeValue = ref('')
	const toggleTypeShow = () => {
		console.log('11')
		typeShow.value = true
	}

	// 生命周期 - 组件挂载时执行初始化
	onMounted(() => {
		onInit();
	});


	
</script>

<style lang="scss">
	.continar {
		padding: 24rpx;

		.filter-continar {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.item-filter {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-right: 15rpx;
				padding-left: 10rpx;
				width: 180rpx;
				height: 60rpx;
				border-radius: 8rpx;
				border: 2px solid #CCCCCC;

				.fil-tit {
					font-weight: 500;
					font-size: 28rpx;
					color: #212121;
					white-space: nowrap;
					overflow: hidden;
				}

				.fil-icon {
					width: 17rpx;
					height: 9.9rpx;
				}
			}
		}

		.product-box {
			position: relative;
			padding: 32rpx 24rpx 0 24rpx;
			height: 444rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.tabeleName {
				font-weight: bold;
				font-size: 36rpx;
				color: #212121;
			}

			.addpesron {
				margin-top: 30rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jzdh {
				margin-top: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jzprice {
				margin-top: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jy-box {
				margin-top: 45rpx;
				display: flex;
				justify-content: space-evenly;

				.jy-item {
					width: 50%;
					text-align: center;

					.price {
						font-weight: bold;
						font-size: 36rpx;
						color: #212121;
						margin-bottom: 20rpx;
					}

					.text {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.jy-item:nth-child(1) {
					border-right: 1rpx solid #E6E6E6;
				}
			}

			.product-poa {
				position: absolute;
				right: 0;
				top: 0;
				width: 136rpx;
				height: 40rpx;
				background: #CCCCCC;
				border-radius: 0rpx 16rpx 0rpx 16rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
			}
		}


		.xf-box {
			position: relative;
			padding: 32rpx 24rpx 0 24rpx;
			height: 444rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			.tabeleName {
				font-weight: bold;
				font-size: 36rpx;
				color: #212121;
			}

			.addpesron {
				margin-top: 30rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jzdh {
				margin-top: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jzprice {
				margin-top: 24rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}

			.jy-box {
				margin-top: 45rpx;
				display: flex;
				justify-content: space-evenly;

				.jy-item {
					width: 35%;
					text-align: center;

					.price {
						font-weight: bold;
						font-size: 36rpx;
						color: #212121;
						margin-bottom: 20rpx;
					}

					.text {
						font-weight: 500;
						font-size: 24rpx;
						color: #999999;
					}
				}

				.jy-item:nth-child(2) {
					border-right: 1rpx solid #E6E6E6;
					border-left: 1rpx solid #E6E6E6;
				}
			}

			.product-poa {
				position: absolute;
				right: 0;
				top: 0;
				width: 136rpx;
				height: 40rpx;
				background: #CCCCCC;
				border-radius: 0rpx 16rpx 0rpx 16rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 40rpx;
			}

			.pj-continar {
				margin-top: 32rpx;
				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.flex-rg {
					flex: 1;

					margin-left: 24rpx;

					view:nth-child(1) {
						font-weight: bold;
						font-size: 32rpx;
						color: #212121;
					}

					view:nth-child(2) {
						font-weight: bold;
						font-size: 24rpx;
						color: #FF3333;
					}
				}
			}
		}


	}

	.main-scroll {
		height: 80vh;
	}
</style>